<template>
  <view class="distribution-page">
    <TopBar
      left-icon="/static/user.png"
      scan-icon="/static/saoyisao.png"
      menu-icon="/static/menu.png"
      @menu="toggleMenu"
    />

    <scroll-view scroll-y class="form-scroll">
      <!-- 返回箭头 -->
      <view class="back-row" @click="goBack">
        <image
          class="back-arrow-icon"
          src="/static/left.png"
          mode="aspectFit"
        />
      </view>

      <!-- 搜索框 -->
      <view class="search-box">
        <image src="/static/search.png" class="search-icon" />
        <input class="search-input" placeholder="Value" />
      </view>

      <!-- 标题 -->
      <text class="page-title">Distribution</text>

      <!-- Online卡片 -->
      <view class="dist-card">
        <text class="card-title">Online</text>
        <view class="card-action">
          <text class="action-btn" @click="addProducts('online')">Add Products</text>
        </view>
      </view>

      <!-- Brand store卡片 -->
      <view class="dist-card">
        <text class="card-title">Brand store</text>
        <view class="store-row">
          <view class="store-item">
            <text class="store-name">Paris</text>
            <text class="store-address">123 rue Saint-Honoré</text>
            <text class="store-address">75001</text>
            <view class="card-action">
              <text class="action-btn" @click="goParis()">Add Products</text>
            </view>
          </view>
          <view class="store-item">
            <text class="store-name">Bordeaux</text>
            <text class="store-address">10 rue Saint-Catherine</text>
            <text class="store-address">33000</text>
            <view class="card-action">
              <text class="action-btn" @click="addProducts('bordeaux')">Add Products</text>
            </view>
          </view>
        </view>
      </view>

      <!-- B to B卡片 -->
      <view class="dist-card">
        <text class="card-title">B to B</text>
        <text class="client-name">J&C</text>
        <text class="client-country">Germany</text>
        <view class="card-action">
          <text class="action-btn" @click="addProducts('j&c')">Add Products</text>
        </view>
      </view>
    </scroll-view>

    <CustomTabbar active="import" />

    <AccountMenu
      v-if="showMenu"
      :style="{ '--anchor-top': '70px', '--anchor-right': '0px' }"
      @close="closeMenu"
      @select="closeMenu"
    />
  </view>
</template>

<script setup>
import { ref } from "vue";
import TopBar from "@/components/TopBar.vue";
import AccountMenu from "@/components/AccountMenu.vue";
import CustomTabbar from "@/components/CustomTabbar.vue";

const showMenu = ref(false);
const toggleMenu = () => {
  showMenu.value = !showMenu.value;
};
const closeMenu = () => {
  showMenu.value = false;
};
const goBack = () => {
  uni.navigateTo({ url: '/pages/brand/qr-production' });
};

const addProducts = (type) => {
  // 添加产品逻辑
  uni.showToast({ title: 'Add Products: ' + type, icon: 'none' });
};

const goParis = () => {
  uni.navigateTo({ url: '/pages/brand/distribution-paris' });
};
</script>

<style lang="scss">
.distribution-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%);
}
.form-scroll {
  margin-top: 60px;
  padding: 0 16px 84px 16px;
  box-sizing: border-box;
}
.back-row {
  margin: 12px 0 0 -8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-arrow-icon {
  width: 24px;
  height: 24px;
}

.search-box {
  height: 44px;
  background: #fff;
  border-radius: 24px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-top: 8px;
  margin-bottom: 18px;
}
.search-icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.search-input {
  flex: 1;
  text-align: left;
  font-size: 14px;
  color: #333;
}

.page-title {
  display: block;
  margin: 12px 4px 16px;
  font-size: 20px;
  font-weight: 800;
  color: #0b1e2a;
}

.dist-card {
  background: #e7f5f7;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.card-title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #0b1e2a;
  margin-bottom: 12px;
}

.store-row {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.store-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.store-name {
  font-size: 16px;
  font-weight: 700;
  color: #0b1e2a;
  margin-bottom: 4px;
}
.store-address {
  font-size: 13px;
  color: #0b1e2a;
  line-height: 1.3;
}

.client-name {
  font-size: 16px;
  font-weight: 700;
  color: #0b1e2a;
  margin-bottom: 4px;
  display: block;
}
.client-country {
  font-size: 13px;
  color: #0b1e2a;
  margin-bottom: 10px;
  display: block;
}

.card-action {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}
.action-btn {
  background: #f0f0f0;
  color: #1a1a1a;
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
</style>
